<template>
  <div>
    <yj-dialog
      :modal="dialog.modal"
      :width="dialog.width"
      :title="dialog.title"
      :dialogVisible="dialog.visible"
      @close="closeDialog"
    >
      <template slot="dialog-content">
        <el-form
          :model="form"
          :rules="rules"
          ref="userForm"
          size="mini"
          label-width="100px"
        >
          <el-form-item label="标题" :rule="rules" prop="title">
            <el-input
              v-model="form.title"
            ></el-input>
          </el-form-item>

          <el-form-item label="名称" :rule="rules" prop="content">
            <el-input
              v-model="form.content"
            ></el-input>
          </el-form-item>

          <el-form-item label="群通知" :rule="rules" prop="all">
            <el-switch
              v-model="form.all"
              disabled
              active-text="群通知"
              inactive-text="">
            </el-switch>
          </el-form-item>
        </el-form>

        <div slot="footer" style="text-align: center" class="dialog-footer">
          <el-button size="mini" @click="cancelDialogBtn('userForm')"
          >取 消
          </el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="saveDialogBtn('userForm')"
          >确 定
          </el-button
          >
        </div>
      </template>
    </yj-dialog>

    <table-frame
      ref="frame"
      :removeKey="prop.removeKey"
      :getDataUrl="prop.getDataUrl"
      :removeUrl="prop.removeUrl"
      :searchShow="prop.searchShow"
      :operateShow="prop.operateShow"
      :location="prop.location"
      :searchModel="prop.searchModel"
      :reloadTable="prop.reloadTable"
      :colunmsCount="prop.colunmsCount"
      :showDelBtn="prop.showDelBtn"
      :delBtnPermission="prop.delBtnPermission"
    >
      <template slot="top_operate" slot-scope="currentRow">
        <auth :code="permission.add">
          <template slot="auth">
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="add()"
              size="mini"
            >群发通知
            </el-button
            >
          </template>
        </auth>
      </template>

      <template slot="columns">

        <el-table-column align="center" prop="title" label="名称"></el-table-column>
        <el-table-column align="center" prop="content" label="通知内容"></el-table-column>
        <el-table-column align="center" prop="all" label="群通知">
          <template slot-scope="scope">
              {{scope.row.all?'群通知':'用户通知'}}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="realName" label="通知用户"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="userCode" label="用户编码"></el-table-column>
        <el-table-column
          prop="createTime"
          sortable
          width="150"
          align="center"
          label="创建时间"
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          sortable
          align="center"
          width="150"
          label="更新时间"
        ></el-table-column>
      </template>
      <template slot="operate">
        <el-table-column fixed="right" align="center" label="操作" width="200">
          <template slot-scope="scope">
            <auth :code="permission.remove">
              <template slot="auth">
                <el-button
                  icon="el-icon-delete"
                  type="text"
                  @click="del(scope.row.id)"
                  size="mini"
                  slot="auth"
                >删除
                </el-button
                >
              </template>
            </auth>
          </template>
        </el-table-column>
      </template>
    </table-frame>
  </div>
</template>
<script>
let _this = {};
import searchModel from "./Search.vue";

export default {
  data() {
    return {
      dialog: {
        width: "40%",
        title: "下发通知",
        visible: false,
        modal: true,
      },
      prop: {
        searchShow: true,
        operateShow: true,
        location: " 消息通知 / 消息列表",
        getDataUrl: "/message/pageList",
        removeUrl: "/message/delete/?",
        searchModel: searchModel,
        removeKey:'id',
        reloadTable: false,
        showDelBtn: true,
        isPage: true,
        delBtnPermission: "message:del"
      },
      form: {
        id: "",
        title: "",
        content: "",
        all: true,
      },

      permission: {
        add: "message:add",
        remove: "message:del",
      },

      rules: {
        id: [{required: false}],
        title: [{required: true}],
        content: [
          {required: true, message: "请输入用户名", trigger: "blur"}
        ],
      },
      URL: {
        save: "/message/save",
        remove: "/message/delete/?",
      },
    };
  },
  created() {
  },
  methods: {
    // 添加
    add() {
      this.dialog.visible = true;
      this.setDataToForm(null);
    },
    // 编辑
    edit(row) {
      this.setDataToForm(row);
      this.dialog.visible = true;
    },
    // 取消
    cancelDialogBtn(userForm) {
      this.dialog.visible = false;
      this.setDataToForm(null);
      this.$refs[userForm].resetFields();
    },

    closeDialog() {
      this.$emit("closeModal", false);
    },

    saveDialogBtn(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.save();
        } else {
          this.$warning("缺少必填数据");
          return false;
        }
      });
    },


    save() {
      this.$postJson(this.URL.save, this.form).then((res) => {
        this.reqResult(res);
      });
    },
    del(id) {
      this.$confirm("此操作将永久删除已选数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$del(this.URL.remove.replace("?", id), {}).then((res) => {
          if (res.R) {
            this.$success("已删除");
            this.reloadTable();
          }
        });
      });
    },
    reqResult(res) {
      if (res.R) {
        this.$success("操作成功");
        this.dialog.visible = false;
        this.setDataToForm(null);
        this.reloadTable();
      }
    },
    setDataToForm(row) {
      if (row != null) {
        for (const key in row) {
          if (row.hasOwnProperty(key)) {
            const element = row[key];
            if (this.form.hasOwnProperty(key)) {
              this.form[key] = element;
            }
          }
        }
      } else {
        for (const key in this.form) {
          if (this.form.hasOwnProperty(key)) {
            this.form[key] = "";
          }
        }
      }
    },
    reloadTable() {
      _this = this;
      this.prop.reloadTable = true;
      setTimeout(() => {
        _this.prop.reloadTable = false;
      }, 1000);
    },
  },
};
</script>
<style>
</style>
<style scoped>
</style>
